<template>
  <!-- 搜索表单 -->
  <!-- 活动名称：
    <el-input v-model="pageParamsForm.map.activityName" style="width: 240px" />
    <el-button type="primary" @click="hdname">搜索</el-button>
    <br /> -->
  <!-- 活动时间查询 -->
  <!--   
    <span class="demonstration">起始时间</span>
    <el-date-picker
      v-model="pageParamsForm.map.startTime"
      type="date"
      :disabled-date="disabledDate"
      value-format="YYYY-MM-DD"
      :shortcuts="shortcuts"
      :size="size"
    />
  
    <span class="demonstration">结束时间</span>
    <el-date-picker
      v-model="pageParamsForm.map.endTime"
      type="date"
      :disabled-date="disabledDate"
      value-format="YYYY-MM-DD"
      :shortcuts="shortcuts"
      :size="size"
    /> -->

  <!-- <el-button type="primary" @click="hdtime">搜索</el-button> -->

  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">添 加</el-button>
  </div>
  <!-- 添加和删除弹出框 -->
  <el-dialog v-model="dialogVisible" title="添加或修改" width="30%">
    <el-form label-width="120px">
      <el-form-item label="站点名称">
        <el-input v-model="brand.address" />
      </el-form-item>
      <el-form-item label="电柜最大电车数量">
        <el-input v-model="brand.maxNum" />
      </el-form-item>

      <el-form-item label="电柜图片">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9999/admin/system/fileUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :headers="headers"
        >
          <img
            v-if="brand.image"
            :src="brand.image"
            style="width: 200px; height: 200px;"
          />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="电池数量">
        <el-input v-model="brand.num" />
      </el-form-item>
      <el-form-item label="电池品牌">
        <el-input v-model="brand.batteryBrand" />
      </el-form-item>
      <el-form-item label="电池类型">
        <el-input v-model="brand.batteryType" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveOrUpdate">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-table :data="list" style="width: 100%">
    <el-table-column prop="address" label="站点名称" />
    <el-table-column prop="id" label="电柜id" />
    <el-table-column prop="maxNum" label="电柜最大电池数量" />
    <el-table-column prop="num" label="电柜池数量" />
    <el-table-column prop="image" label="站点图片" #default="scope1">
      <img :src="scope1.row.image" width="50" />
    </el-table-column>
    <el-table-column prop="batteryName" label="电池名称" />
    <el-table-column prop="batteryBrand" label="电池品牌" />
    <el-table-column prop="batteryType" label="电池类型" v-slot="scope">
      <span>{{ scope.row.batteryType == 2 ? '40v' : '' }}</span>
      <span>{{ scope.row.batteryType == 1 ? '60v' : '' }}</span>
    </el-table-column>
    <el-table-column label="操作" align="center" #default="scope">
      <el-button type="primary" size="small" @click="editShow(scope.row)">
        修改
      </el-button>
      <el-button type="danger" size="small" @click="remove(scope.row.id)">
        删除
      </el-button>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="pageParamsForm.page"
    v-model:page-size="pageParamsForm.limit"
    :page-sizes="[2, 4, 6, 8]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  getpowerlist,
  getpowersave,
  getpowerupdate,
  getpowerdelete,
} from '@/api/power'
import { ElMessage, ElMessageBox } from 'element-plus'
// 定义提交表单数据模型
const brand = ref({
  id: null,
})
const dialogVisible = ref(false)

//   显示添加品牌表单
const addShow = () => {
  brand.value = {}
  dialogVisible.value = true
}

// 图像上传成功以后的事件处理函数
const handleAvatarSuccess = (response, uploadFile) => {
  brand.value.imgs = response.data
}

// 定义表格数据模型
const list = ref([])

// 分页条数据模型
const total = ref('')
// 条件查询
// const cxName = ref('')
//分页条数据模型
const pageParamsForm = ref({
  page: 1, // 页码
  size: 3, // 每页记录数
})

// 钩子函数
onMounted(() => {
  fetchData()
})

//页面变化
const handleSizeChange = size => {
  pageParamsForm.value.size = size
  fetchData()
}
const handleCurrentChange = number => {
  pageParamsForm.value.page = number
  fetchData()
}

// 分页查询
const fetchData = async () => {
  const { data } = await getpowerlist(pageParamsForm.value)
  list.value = data.list
  total.value = data.total
}

//进入修改
const editShow = row => {
  brand.value = row
  dialogVisible.value = true
}

// 保存数据
const saveOrUpdate = () => {
  if (!brand.value.id) {
    saveData()
  } else {
    updateData()
  }
}

// 新增
const saveData = async () => {
  await getpowersave(brand.value)
  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}

// 修改
const updateData = async () => {
  await getpowerupdate(brand.value)
  dialogVisible.value = false
  ElMessage.success('操作成功')
  fetchData()
}
//   //删除
const remove = async id => {
  ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await getpowerdelete(id)
    ElMessage.success('删除成功')
    fetchData()
  })
}
</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
